<template>
  <el-form-item label="音频文件">
    <div>&nbsp;</div>
    <div class="file-list" v-if="tempValue.length > 0">
      <div
        v-for="(item, index) in tempValue"
        :key="index"
        @mouseenter="showId=item.id"
        @mouseleave="showId=0"
      >
        <div class="item" :style="getStyle(item.cover, 4)">
          <div class="tool-list" v-show="item.id===showId">
            <i class="iconfont icon-delete" @click="del(index)"></i>
          </div>
        </div>
        <div>{{item.fileName}}</div>
      </div>
    </div>
    <div v-else>空</div>
    <add-assets @before-open="_beforeOpen" :size="{height:140}" />
  </el-form-item>
</template>

<script>
import AddAssets from '@/components/program-editor/add-assets'
import uploadMixin from '@/mixins/assets-upload-mixin'
import { mapActions } from 'vuex';
export default {
  name: 'attr-sxc-bgAudioList',
  components: {
    AddAssets
  },
  props: {
    bgAudioList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      tempValue: [],
      showId: 0
    }
  },
  watch: {
    bgAudioList (v1, v2) {
      if (JSON.stringify(v1) === JSON.stringify(v2)) {
        return
      }
      this.initData()
    },
    tempValue () {
      this.change()
    }
  },
  mixins: [uploadMixin],
  created () {
    this.initData()
  },
  methods: {
    ...mapActions('programs', ['deleteElment']),
    initData () {
      let list = []
      this.bgAudioList.forEach(item => {
        list.push(item)
      })
      this.tempValue = list
    },
    getResultList () {
      let list = []
      for (let i = 0, len = this.tempValue.length; i < len; i++) {
        list.push(this.tempValue[i])
      }
      return list
    },
    change () {
      this.$emit('update:bgAudioList', this.getResultList())
    },
    del (index) {
      this["deleteElment"]();
    },
    _beforeOpen () {
      this.beforeOpen({
        cid: 4,
        limit: 1,
        propName: {
          'propsValue': 'bgAudioList'
        },
        selected: [...this.bgAudioList]
      })
    }
  }

}
</script>

<style lang="scss" scoped>
</style>
